<template>
  <div>
    <!-- <el-card class="login-container" shadow="never">
    <div class="tc fs-20 fw-b" slot="header">用户登录</div>-->

    <el-tabs class="login-container" type="border-card" stretch>
      <el-tab-pane label="账号密码登录">
        <Account @jumpForgetPswd="jumpForgetPswd" />
      </el-tab-pane>
      <el-tab-pane label="手机号登录">
        <Mobile @jumpForgetPswd="jumpForgetPswd" />
      </el-tab-pane>
      <el-divider content-position="center" class="mt-40">第三方登录</el-divider>
      <div class="tc icon-box">
        <span class="icon-sz mg-10 pointer" @click="qiyeWechatLogin">
          <svg-icon icon-class="wechat-qiye" class="icon" />
        </span>
      </div>
    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { qiyeWechatLogin } from "api/user";
import Account from "./components/Account";
import Mobile from "./components/Mobile";
export default {
  name: "Login",
  components: { Account, Mobile },
  data() {
    return {
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    jumpForgetPswd() {
      this.$router.push({
        name: "ForgetPswd"
      });
    },
    qiyeWechatLogin() {
      // 如果token存在 则无需校验
      console.log("token ->", getToken());
      if (getToken()) {
        this.$router.replace({
          path: this.redirect || "/"
        });
      } else {
        qiyeWechatLogin().then(res => {
          console.log("url->", res.data);
          if (res.data) {
            window.location.href = res.data;
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "styles/variables.scss";
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #2d3a4b;

.login-container {
  width: 520px;
  position: relative;
  left: 50%;
  top: 160px;
  transform: translateX(-50%);
  overflow: hidden;
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    color: $dark_gray;
    font-size: 20px;
  }
}
.icon-sz {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  border-radius: 100%;
  font-size: 30px;
  text-align: center;
  border: 1px solid $border;
}
.mt-40 {
  margin-top: 40px;
}
</style>
